<template>
	<div class="zh-play-statistics">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link to="/resources/video/video-library" tag="a">视频库管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
		</nav-header>

		<div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width">
                        <el-input
                        v-model="videoParam.keyword"
                        placeholder="请输入视频名称" @keyup.enter.native="getPlayStatistics"></el-input>
                    </div>
                    <el-button type="primary" @click="getPlayStatistics">搜索</el-button>
                    <el-button type="primary" @click="resetData">重置</el-button>
                </div>
				<div class="zh-open-left fr">
                    <el-button type="primary" @click="exportData">导出所选</el-button>
                </div>
            </div>
            <div
                class="zh-table-contents"
                v-loading="loading.status"
                :element-loading-text="loading.txt">
                <el-table
                    border
                    max-height="541"
                    :data="videoData"
                    style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" fixed> </el-table-column>
                    <el-table-column
                        prop="videoTitle"
                        label="视频名称"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="user_number"
                        label="用户账号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="user_name"
                        label="用户名"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="操作时间"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="videoParam.page_index"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="videoParam.page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                </div>
            </div>
        </div>

	</div>
</template>	

<script>

  	export default {
	    data() {
	      	return {
				videoData: [],
				total_number: 0,
				videoParam: {
                    record_id: null,
                    keyword: '',
					page_index: 1,
					page_size: 10
				},
				loading: {
					status: false,
					txt: '暂无数据'
                },
                selectData: [],
	      	};
	    },
	    created(){
			this.getPlayStatistics()
	    },
	    methods: {
			resetData() {
                this.videoParam.keyword = ''
                this.getPlayStatistics()
			},
			exportData() {
                if(this.selectData.length == 0) return this.$message.warning('请选择需要导出的播放记录')
                console.log(this.selectData, 'selectData')
                let params = {}
                if(this.total_number != this.selectData.length) {
                    let arr = []
                    for(let i = 0; i < this.selectData.length; i++) {
                        arr.push(this.selectData[i].id)
                    }
                    params = {
                        record_id: arr,
                        keyword: '',
                    }
                }
                this.export_excel('/api/xkvideo/video_record_export', params, '播放记录');
			},
			getPlayStatistics() {
                const success = res =>{
                    this.videoData = res.data.data
                    this.total_number = res.data.data_sum
                }

                this.$ajax.get('/api/xkvideo/video_record_list', {params: this.videoParam, func: {success}})
			},
			handleSelectionChange(val) {
                this.selectData = val
			},
			handleSizeChange(val) {
                this.videoParam.page_index = 1
                this.videoParam.page_size = val
                this.getPlayStatistics()
			},
			handleCurrentChange(val) {
                this.videoParam.page_index = val
                this.getPlayStatistics()
			},
	    },
  	};
</script>

<style lang="scss">
.zh-play-statistics {

}
</style>
